<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="google-site-verification" content="4st4ki5585g6DlepbbFy-Sa-b10DKq1klis4Nsql3xA" />
    <title>Kavadenn: add place</title>
    
    <link href="/static/css/kavadenn.css" rel="Stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/css/jquery.wysiwyg.css" type="text/css" />
    <link rel="stylesheet" href="/static/css/jquery.fancybox-1.3.1.css" type="text/css" />
    
    <style type="text/css">
      /*
        root element for the scrollable.
        when scrolling occurs this element stays still.
      */
      .scrollable {
      
        /* required settings */
        position:relative;
        overflow:hidden;
        width: 730px;
        height:400px;
      }
      
      /*
        root element for scrollable items. Must be absolutely positioned
        and it should have a extremely large width to accommodate scrollable items.
        it's enough that you set width and height for the root element and
        not for this element.
      */
      .scrollable .items {
        /* this cannot be too large */
        width:20000em;
        position:absolute;
      }
      
      /*
        a single item. must be floated in horizontal scrolling.
        typically, this element is the one that *you* will style
        the most.
      */
      .scroll-item {
        float:left;
        width:730px;
        height:400px;
        position:relative; 
      }
    </style>


</head>
<body>
    <div id="header">
        <a href="/"><h1>kavadenn</h1></a>
    </div>

    <div id="content">
        <div id="addPlaceSectionHeader">
            <h2>Mettez votre commune sur kavadenn!</h2>

            <p>:)</p>
        </div>
        
        <form id="formAddPlace" enctype="multipart/form-data" action="/places/add/" method="post"><div style='display:none;'><input type='hidden' id='csrfmiddlewaretoken' name='csrfmiddlewaretoken' value='d6c1bb1e410c902a3371a4d8b08c4491' /></div>
            
            <!-- root element for scrollable -->
            <div class="scrollable">   
   
             <!-- root element for the items -->
             <div class="items">
   
               <div class="scroll-item">
                <p>
                  <h3><strong>1</strong> Préciser le nom de l'endroit</h3>
                  <input id="id_name" type="text" class="textBox" name="name" maxlength="50" />
                <p>
                <div style="position:absolute;bottom:0;left:0;right:0;">
                  <a class="next browse right">NEXT</a>
                </div>  
               </div>
       
               <div class="scroll-item">
                <p>
                  <h3><strong>2</strong> La description suivante sera associée à l'endroit</h3>
                  <textarea id="id_description" rows="5" cols="40" name="description" class="textBox"></textarea><br />
                </p>
                <p style="font-size:smaller;color:#767676;">cette description sera visible sur la page de l'endroit</p>
                <div style="position:absolute;bottom:0;left:0;right:0;">
                  <a class="prev browse left">PREV</a>|
                  <a class="next browse right">NEXT</a>     
                </div>
               </div>
   
               <div class="scroll-item">
                <p>
                  <h3><strong>3</strong> Précisez les catégories pertinantes (separées par des virgules)</h3>
                  <input id="id_tags" type="text" class="textBox" name="tags" maxlength="50" />
                  <p style="font-size:smaller;color:#767676;">par exemple: plage, port, voile</p>
                </p>
                <div style="position:absolute;bottom:0;left:0;right:0;">
                  <a class="prev browse left">PREV</a>|
                  <a class="next browse right">NEXT</a>
                </div>
               </div>
    
              <div class="scroll-item">
                <p>
                  <h3><strong>4</strong> La carte de l'endroit</h3>
                  <div id="map_canvas" style="height:300px;"></div>
                </p>
                <div style="position:absolute;bottom:0;left:0;right:0;">
                  <a class="prev browse left">PREV</a>|
                  <a class="next browse right">NEXT</a>
                </div>
              </div>
              
              <div class="scroll-item">
                <p>
                    <h3><strong>5</strong> Choisissez une image à associer avec cet endroit</h3>
                    
                    <div id="images_panel">
                        <div>
                            Vous pouvez télécharger une image depuis votre ordinateur (la taille maximum est de 1 mega)
                            <button id="id_upload_image">
                               télécharger image
                            </button>
    
                        </div>
                        <div id="pics"></div>
                    </div>
                </p>
                <div style="position:absolute;bottom:0;left:0;right:0;">
                  <a class="prev browse left">PREV</a>|
                  <a class="next browse right">NEXT</a>
                </div>
              </div>
    
              <div class="scroll-item">
                On a toutes les informations! On peut ajouter votre commune sur kavadenn! Woo Hoo! 
                <div style="position:absolute;bottom:0;left:0;right:0;">
                  <p class="formToolbar">
                    <center>
                        <button id="id_addPlaceFormSubmit">
                            +Ajouter
                        </button>
                    </center>
                  </p>
                </div>
              </div>
    
             </div>
   
            </div>

          
 
            <input type="hidden" name="userId" id="id_userId" />
            <input type="hidden" name="latitude" id="id_latitude" />

            <input type="hidden" name="longitude" id="id_longitude" />
            <input type="hidden" name="sThumbUrl" id="id_sThumbUrl" />
            <input type="hidden" name="mThumbUrl" id="id_mThumbUrl" />
            
            
        </form>

        <div id="fb-root"></div>
    </div>

    <script src="/static/js/jquery/jquery.js" type="text/javascript"></script>
    <script src="/static/js/jquery/ajaxupload.js" type="text/javascript"></script>

    <script type="text/javascript" src="/static/js/jquery/jquery.wysiwyg.js"></script>
    <script type="text/javascript" src="/static/js/jquery/jquery.fancybox-1.3.1.js"></script>
    <script type="text/javascript" src="/static/js/jquery/jquery.scroll.js"></script>
    
    <script src="/static/js/base/flex.background.js" type="text/javascript"></script>
    <script src="/static/js/base/NotificationManager.js" type="text/javascript"></script>
    
    <script src="/static/js/places/explorer/PlaceExplorerApplication.js" type="text/javascript"></script>
    <script src="/static/js/places/explorer/PlaceExplorerMap.js" type="text/javascript"></script>

    <script src="/static/js/places/explorer/PlaceExplorerImages.js" type="text/javascript"></script>
    <script src="/static/js/places/explorer/PlaceExplorerSocial.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://connect.facebook.net/fr_FR/all.js" type="text/javascript"></script>

    <script type="text/javascript">
        /* <![CDATA[ */
        $(document).ready(function() {
            var application = new places.PlaceExplorerApplication({});
            application.run();
            
            $(".scrollable").scrollable();
        });
        /* ]]> */
    </script>    

</body>
</html>